// import React from 'react'
import './TakingOrders.css'
import { Tabs } from 'antd-mobile'
import TabBar1 from '../../../components/TabBar/TabBar'
import { useState } from 'react'


export default function TakingOrders() {
    const [dataList, setDataLsit] = useState([
        {
            id: 1,
            psf: 4,
            startName: '吉阿婆玛拉顿',
            startAddress: '梨园22号楼114514号橱窗',
            endAddress: '雅畈3栋224b',
            Remark: '备注：少放亿点香菜',
            state: 2
        },
        {
            id: 2,
            psf: 3,
            startName: '老八美食店',
            startAddress: '梨园22号楼114514号橱窗',
            endAddress: '雅畈3栋224b',
            Remark: '备注：老八秘制小汉堡',
            state: 2
        },
        {
            id: 3,
            psf: 3,
            startName: '老八美食店',
            startAddress: '梨园22号楼114514号橱窗',
            endAddress: '雅畈3栋224b',
            Remark: '备注：老八秘制小汉堡',
            state: 1
        },
        {
            id: 4,
            psf: 3,
            startName: '老八小憨包',
            startAddress: '梨园22号楼14号橱窗',
            endAddress: '雅畈3栋224156b',
            Remark: '备注：老八秘制小汉堡',
            state: 0
        },
    ])
    // 接单
    const AcceptOrder = (id) => {
        setDataLsit(preDataList =>
            preDataList.map(item =>
                item.id === id ? { ...item, state: 1 } : item
            )
        )
    }
    // 已完成
    const Completed = (id) => {
        setDataLsit(preDataList =>
            preDataList.map(item =>
                item.id === id ? { ...item, state: 0 } : item
            )
        )
    }
    return (
        <div className='my-order'>
            <div className='my-order-title'>
                <h2>接单</h2>
            </div>  
            <div className='my-order-tabs'>
                <Tabs className='order-tabs'>
                    <Tabs.Tab title='待接单' key='pending-order'>
                        <div className='order-tabs-tab-box'>
                            {dataList.map(item => (
                                item.state === 2 && (
                                    <div className='tab-box-box' key={item.id}>
                                        {/* 价格事件 */}
                                        <div className='box-item-title'>
                                            <span className='item-title-money'>配送费：￥{item.psf}</span>
                                            <span className='item-title-time'>期望时间11:00送达</span>
                                        </div>
                                        {/* 分割线 */}
                                        <div className='item-title-border'></div>
                                        {/* 详细信息 */}
                                        <div className='item-title-message'>
                                            <div className='title-message-top'>
                                                <div className='top-top'>
                                                    <span className='top-top-left'>{item.startName}</span>
                                                    <span className='top-top-right'>194m</span>
                                                </div>
                                                <div className='top-bottom'>
                                                    {item.startAddress}
                                                </div>
                                            </div>
                                            <div className='title-message-bottom'>
                                                <div className='top-top'>
                                                    <span className='top-top-left'>{item.endAddress}</span>
                                                    <span className='top-top-right'>114514m</span>
                                                </div>
                                                <div className='top-bottom'>
                                                    {item.Remark}
                                                </div>
                                            </div>
                                            {/* 分割线 */}
                                            <div className='item-title-border'></div>
                                            <div className='box-box-btn-djd'>
                                                <button onClick={() => AcceptOrder(item.id)}>接单</button>
                                            </div>
                                        </div>
                                    </div>

                                )
                            )
                            )
                            }
                        </div>
                    </Tabs.Tab>

                    <Tabs.Tab title='配送中' key='in-delivery'>
                        <div className='order-tabs-tab-box'>
                            {dataList.map(item => (
                                item.state === 1 && (
                                    <div className='tab-box-box' key={item.id}>
                                        <div className='box-item-title'>
                                            <span className='item-title-money'>配送费：￥{item.psf}</span>
                                            <span className='item-title-time'>期望时间11:00送达</span>
                                        </div>
                                        <div className='item-title-border'></div>
                                        <div className='item-title-message'>
                                            <div className='title-message-top'>
                                                <div className='top-top'>
                                                    <span className='top-top-left'>{item.startName}</span>
                                                    <span className='top-top-right'>194m</span>
                                                </div>
                                                <div className='top-bottom'>
                                                    {item.startAddress}
                                                </div>
                                            </div>
                                            <div className='title-message-bottom'>
                                                <div className='top-top'>
                                                    <span className='top-top-left'>{item.endAddress}</span>
                                                    <span className='top-top-right'>114514m</span>
                                                </div>
                                                <div className='top-bottom'>
                                                    {item.Remark}
                                                </div>
                                            </div>
                                            <div className='item-title-border'></div>
                                            <div className='box-box-btn-psz'>
                                                <button onClick={()=>Completed(item.id)}>已送达</button>
                                            </div>
                                        </div>
                                    </div>
                                )
                            ))}
                        </div>
                    </Tabs.Tab>

                    <Tabs.Tab title='已完成' key='completed'>
                        <div className='order-tabs-tab-box'>
                            {dataList.map(item => (
                                item.state === 0 && (
                                    <div className='tab-box-box-ok' key={item.id}>
                                        <div className='box-item-title'>
                                            <span className='item-title-money'>配送费：￥{item.psf}</span>
                                            <span className='item-title-time'>期望时间11:00送达</span>
                                        </div>
                                        <div className='item-title-border'></div>
                                        <div className='item-title-message'>
                                            <div className='title-message-top'>
                                                <div className='top-top'>
                                                    <span className='top-top-left'>{item.startName}</span>
                                                    <span className='top-top-right'>194m</span>
                                                </div>
                                                <div className='top-bottom'>
                                                    {item.startAddress}
                                                </div>
                                            </div>
                                            <div className='title-message-bottom'>
                                                <div className='top-top'>
                                                    <span className='top-top-left'>{item.endAddress}</span>
                                                    <span className='top-top-right'>114514m</span>
                                                </div>
                                                <div className='top-bottom'>
                                                    {item.Remark}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                )
                            ))}
                        </div>
                    </Tabs.Tab>

                </Tabs>
            </div>
            {/* 底部导航栏 */}
            <div>
                <TabBar1 />
            </div>
        </div>
    )
}
